<%--
Created by IntelliJ IDEA.
User: SongTiantian
Date: 2020/11/18
Time: 17:33
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@include file="/front-end/views/common/head.jsp"%>
    <title>TTMS注册</title>
    <script type="text/javascript">
        // 给验证码的图片，绑定单击事件
        $("#code_img").click(function () {
            // 在事件响应的function函数中有一个this对象。这个this对象，是当前正在响应事件的dom对象
            // src属性表示验证码img标签的 图片路径。它可读，可写
            // alert(this.src);
            this.src = "${basePath}kaptcha.jpg?d=" + new Date();
        });
    </script>

    <style>
        *{
            margin:0;
            padding:0;
        }
        #top{
            width: 100%;
            height:80px;
            background-color: #eb002a;
        }
        #top p{
            color:white;
            font-size: 40px;
            padding-left:50px;
            padding-top:10px;
        }
        #main{
            width: 100%;
            height:550px;
            /* background-color: pink; */
        }
        #main-left{
            float:left;
        }
        #main-left img{
            width: 500px;
            height:300px;
            margin-left:100px;
            margin-top:120px;
        }
        /* #xian{
            margin-left:100px;
            margin-top:500px;
            float:left;
            width:5px;
            height:150px;
            margin-top:50px;
            background-color:#eb002a ;


        } */
        #main-right{
            float:left;
            margin-left:200px;
            margin-top:150px;
            width: 500px;
            height:300px;
            /* border:2px solid black; */
        }
        #bottom{
            width:100%;
        }
        #bottom img{
            width:100%;
            height:80px;
        }
        #main-right input{
            padding-left: 5px;
            width:250px;
            height:35px;
            border-radius: 10px;
            outline:none;
        }
        #main-right p{
            font-size: 20px;
        }
        #submit{
            margin-top: 20px;
            width:260px;
            height: 40px;
            background-color: #eb002a;
            color: white;
            font-size: 20px;
            border:3px solid #eb002a;
            border-radius: 10px;
        }
        #submit:hover{
            background-color:  white;
            color:  #eb002a;
            border:3px solid #eb002a;
        }
    </style>
    <script type="text/javascript">
        // 页面加载完成之后
        $(function () {
            // 给注册绑定单击事件
            $("#sub_btn").click(function () {
                // 验证用户名：必须由字母，数字下划线组成，并且长度为5到12位
                //1 获取用户名输入框里的内容
                var usernameText = $("#username").val();
                //2 创建正则表达式对象
                var usernamePatt = /^\w{5,12}$/;
                //3 使用test方法验证
                if (!usernamePatt.test(usernameText)) {
                    //4 提示用户结果
                    $("span.errorMsg").text("用户名不合法！");

                    return false;
                }

                // 验证密码：必须由字母，数字下划线组成，并且长度为5到12位
                //1 获取用户名输入框里的内容
                var passwordText = $("#password").val();
                //2 创建正则表达式对象
                var passwordPatt = /^\w{5,12}$/;
                //3 使用test方法验证
                if (!passwordPatt.test(passwordText)) {
                    //4 提示用户结果
                    $("span.errorMsg").text("密码不合法！");

                    return false;
                }

                // 验证确认密码：和密码相同
                //1 获取确认密码内容
                var repwdText = $("#repwd").val();
                //2 和密码相比较
                if (repwdText != passwordText) {
                    //3 提示用户
                    $("span.errorMsg").text("确认密码和密码不一致！");

                    return false;
                }

                // 手机号验证：1xxxxxxxxxx
                //1 获取手机号里的内容
                var phoneText = $("#phone").val();
                //2 创建正则表达式对象
                var phonePatt = /^1[0-9]{10}$/;
                //3 使用test方法验证是否合法
                if (!phonePatt.test(phoneText)) {
                    //4 提示用户
                    $("span.errorMsg").text("手机号格式不合法！");

                    return false;
                }
                // 验证码：现在只需要验证用户已输入
                var codeText = $("#code").val();

                //去掉验证码前后空格
                // alert("去空格前：["+codeText+"]")
                codeText = $.trim(codeText);
                // alert("去空格后：["+codeText+"]")

                if (codeText == null || codeText == "") {
                    //4 提示用户
                    $("span.errorMsg").text("验证码不能为空！");

                    return false;
                }
                // 去掉错误信息
                $("span.errorMsg").text("");

            });

        });

    </script>
</head>
<body>
<div id="top">
    <p>淘票票</p>
</div>
<div id="main">
    <div id="main-left">
        <img src="front-end/img/111.png" alt="">
    </div>

    <!-- <div id="xian"></div> -->
    <div id="main-right">
        <span style="color: #c81623" class="errorMsg">${ empty requestScope.msg ? "请输入用户名和密码":requestScope.msg }</span>
        <form action="userServlet" method="post">
            <input type="hidden" name="action" value="regist">
            <a style="color: #c81623" href="login.jsp">已有帐号，马上登录</a><br>
            <label>用户名称：</label>
            <input class="itxt" type="text" placeholder="请输入用户名"
                   value="${requestScope.username}"
                   autocomplete="off" tabindex="1" name="username" id="username" />
            <br />
            <br />
            <label>用户密码：</label>
            <input class="itxt" type="password" placeholder="请输入密码"
                   value="${requestScope.password}"
                   autocomplete="off" tabindex="1" name="password" id="password" />
            <br />
            <br />
            <label>确认密码：</label>
            <input class="itxt" type="password" placeholder="确认密码"
                   value="${requestScope.repwd}"
                   autocomplete="off" tabindex="1" name="repwd" id="repwd" />
            <br />
            <br />
            <label>手机号码：</label>
            <input class="itxt" type="text" placeholder="请输入手机号码"
                   value="${requestScope.phone}"
                   autocomplete="off" tabindex="1" name="phone" id="phone" />
            <br />
            <br />
            <label>验证码：&nbsp;&nbsp;&nbsp;&nbsp;</label>
            <input class="itxt" type="text" name="code" style="width: 150px;" id="code" value="${requestScope.code}"/>
            <img alt="" src="${basePath}kaptcha.jpg" style="float: right; margin-right: 40px">
            <br />
            <br />
            <input type="submit" value="注册" id="sub_btn" />
        </form>
    </div>
</div>
<div id="bottom">
    <img src="front-end/img/hahaha.png" alt="">
</div>

</body>
</html>